<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/static/images/favicon.ico" />
    <link rel="bookmark" href="/static/images/favicon.ico" />
    <title>注册</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/sweetalert.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/semantic.min.css" rel="stylesheet" type="text/css"/>
    <style>
        body{
            background: url("static/images/background.jpg") no-repeat center/cover;
            padding-top: 200px;
        }
    </style>
</head>
<body>

<h1 style="text-align: center;">用户注册</h1>
<br/><br/>
<div class="container" style="width: 600px">
    <div>
        <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </div>
            <input type="text" id="username" name="username" class="form-control" placeholder="用户名"/>

        </div>
        <br/>
        <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span> </div>
            <input type="password" id="password" name="password" class="form-control" placeholder="密 码"/>
        </div>
        <br/>
        <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></div>
            <select class="form-control" id="group_select">
                <option value="group_s">学 生</option>
                <option value="group_t">老 师</option>
                <option value="group_l">领 导</option>
            </select>
        </div>
        <br/>
        <input id="register" type="submit" class="form-control btn btn-success" value="注 册" />
    </div>

    <br/>
    <p style="text-align: left" id="hint">已注册？<a href="/login?logout">快去登录</a><br/><br/></p>
</div>


<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/sweetalert.min.js"></script>
<script src="/static/js/semantic.min.js"></script>
</body>
<script>
    $(function () {
        var clearForm = function () {
            $("#username").val("");
            $("#password").val("");
            //$("#role_select option").first().attr("selected", "selected");
        };

        $('#register').click(function () {
            var username = $('#username').val();
            var password = $('#password').val();

            if (username.length < 2 && password.length < 2) {
                swal({
                    title: "用户名和密码的长度不能小于2",
                    type: "warning",
                    confirmButtonText: "OK",
                    timer: 3000
                }, clearForm);
            }

            else if (username.length < 2 && password.length >= 2) {
                swal({
                    title: "用户名长度不能小于2",
                    type: "warning",
                    confirmButtonText: "OK",
                    timer: 3000
                }, clearForm);
            }

            else if (username.length >= 2 && password.length < 2) {
                swal({
                    title: "密码长度不能小于2",
                    type: "warning",
                    confirmButtonText: "OK",
                    timer: 3000
                }, clearForm);
            }

            else {
                var group = $("#group_select>option:selected").attr("value");
                var user = {
                    username: username,
                    password: password,
                    group: group
                };

                var registerUrl = '/register';
                $.post(registerUrl, user, function (data, status) {
                    if (data === 'user_has_existed') {
                        swal({
                            title: "用户已存在，请重新输入",
                            type: "warning",
                            confirmButtonText: "OK"
                        }, clearForm);
                    }
                    else if (data === 'register_success') {
                        swal({
                            title: "注册成功，可以登陆啦",
                            type: "success",
                            confirmButtonText: "OK",
                            timer: 3000
                        }, clearForm);
                    }

                })
            }
        })
    });
</script>
</html>